<template>
  <div>
     
    <el-card class="box-card">
        <el-button type="primary" @click="gosave()">添加商品分类</el-button>
        <zk-table
             class="tabletop"
             :data="tableData"
             :columns="columns"
             :selection-type="false"
             :expand-type="false"
             show-index
             index-text="#"
             border
             :show-row-hover="false"
        >
        <template slot="isvalid" slot-scope="scope">
            <i class="el-icon-success" style="color:lightgreen;" v-if="scope.row.cat_deleted===false"></i>
        <i class="el-icon-error" style="color:red;" v-else></i>
        </template>
                <template slot="order" slot-scope="scope">
                    <el-tag v-show="scope.row.cat_level===0">一级</el-tag>
                    <el-tag type="success" v-show="scope.row.cat_level===1">二级</el-tag>
                    <el-tag type="warning" v-show="scope.row.cat_level===2">三级</el-tag>
                </template>
            <template slot="handle" slot-scope="scope" >
              <el-button type="primary" size="mini" width="100px" icon="el-icon-edit" @click="goeait(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
            </template>
        </zk-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryinfo.pagesize"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalsize"
        ></el-pagination>
    </el-card>

<!-- 添加分类弹窗开始 -->
<el-dialog title="添加分类" 
:visible.sync="isShow"  
:close-on-click-modal="false" 
@close="clearform">
<!-- 表单内容开始 -->
<el-form :model="saveobj" :rules="checkform" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="分类名称:" prop="cat_name">
    <el-input v-model="saveobj.cat_name"></el-input>
  </el-form-item>
    <el-form-item label="父级分类:" prop="cat_pid">
     <el-cascader
    v-model="selectkeys"
    :options="options"
    :props="{ expandTrigger: 'hover',label:'cat_name', value:'cat_id' }"
    clearable
   @change="handleChange"

    ></el-cascader>
  </el-form-item>
</el-form>
<!-- 表单内容结束 -->
  <div slot="footer" class="dialog-footer">
    <el-button @click="isShow = false">取 消</el-button>
    <el-button type="primary" @click="save()">确 定</el-button>
  </div>
</el-dialog>
<!-- 添加分类弹窗结束 -->


    <el-dialog title="收货地址" :visible.sync="isopen">
    <el-form>
            <el-form-item label="分类名称" label-width="100px">
              <el-input v-model="saveobj.cat_name"></el-input>
            </el-form-item>
            <el-form-item label="是否有效" label-width="100px">
              <el-input v-model="saveobj.cat_pid"></el-input>
            </el-form-item>
            <el-form-item label="级别" label-width="100px">
              <el-input v-model="saveobj.cat_level"></el-input>
            </el-form-item>
           
          </el-form>

  <div slot="footer" class="dialog-footer">
    <el-button @click="isopen = false">取 消</el-button>
    <el-button type="primary" @click="sure()">确 定</el-button>
  </div>
</el-dialog>

  </div>
</template>

<script>
export default {
name:"goodstype",
data(){
    return{
      secrchObj:{
       cat_name:'',
       cat_level:'',
       cat_pid:''

      },
      isopen:false,
        selectkeys:[], //定义默认选中的级联分类
        options:[],
        saveobj:{
            cat_pid:0, //父级分类id
            cat_name:"", //分类名称
            cat_level:0 //分类级别,默认为一级
        },
        // 表单验证规则
        checkform:{
            cat_name:[
                 { required: true, message: "请输入分类名称", trigger: "blur" },
            ]
    },
        isShow:false,
        queryinfo:{
            type:3, //请求分类的级别
            pagenum:1, //当前页码
            pagesize:5 //每页显示的数据条数
        },
        totalsize:0, //记录所有数据条数的属性
        tableData:[], //表格数据源
        // 定义表格中列显示数据的对应关系
        columns:[
            {
                label:"分类名称", //定义列标题
                prop:"cat_name" //定义该列需要展示的信息
            },
            {
                label:"是否有效", 
                type:"template",//定义该列为模板列
                template:"isvalid" //定义模板列对应的模板插槽
            },
            {
                label:"分类级别", 
                type:"template",//定义该列为模板列
                template:"order" //定义模板列对应的模板插槽
            },
            {
                label:"操作", 
                type:"template",//定义该列为模板列
                template:"handle", //定义模板列对应的模板插槽
                width:180
            }
        ]
    }
},
methods:{
      //值回填
     async goeait(row){
        this.isopen=true
        console.log(row);
        let rst=await this.$http.get(`categories/${row.cat_id}`)
        console.log(rst);
        let{data,meta}=rst
        this.saveobj.cat_name=data.cat_name
        this.saveobj.cat_level=data.cat_level
        this.saveobj.cat_pid=data.cat_pid
      },
      //确认修改
      async sure(){
        console.log(this.saveobj.cat_pid);
      let rst = await this.$http.put(`categories/${this.saveobj.cat_pid}`,{
        cat_name:this.saveobj.cat_name
      })
      this.isopen=false
      this.query()
      console.log(rst);
      },
     //发送添加请求的方法
     save(){
         this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
           let rst=await this.$http.post("categories",this.saveobj);
            if(rst.meta.status==201){
                this.query(); //添加成功调用query方法
                //关闭弹窗
                this.isShow=false;
            }else{
                this.$message.error("添加失败");
            }
            console.log(rst);
          } else {
            this.$message.error("请按照要求完善输入信息")
           return false;
          }
        });
     },
    async del(row){
      console.log(row);
      let rst =await this.$http.delete(`categories/${row.cat_id}`)
      console.log(rst);
      this.query()
     },

    // 当弹窗关闭时触发的方法,在该方法中重置提交数据和级联下拉框默认选中的内容
    clearform(){
        this.saveobj= {
            cat_pid:0, //父级分类id
            cat_name:"", //分类名称
            cat_level:0 //分类级别,默认为一级
        };
        this.selectkeys=[]; //清空级联下拉框中默认选中的值
    },
// 当级联下拉框的值变化时触发的事件
handleChange(){
   if(this.selectkeys.length>0){
        //为添加参数的父级id赋值
        this.saveobj.cat_pid=this.selectkeys[this.selectkeys.length-1];
        //为当前等级分类赋值
        this.saveobj.cat_level=this.selectkeys.length;
   }else{
       //当数组长度为0时则父级id为0,分类级别为0
        this.saveobj.cat_pid=0;
        this.saveobj.cat_level=0; 
   }
},
    // 发送获取一级和二级分类列表的请求
  async  gettypes(){
 let rst=await this.$http.get("categories",{type:2});
 if(rst.meta.status==200){
     //将结果赋值给级联下拉框的数据源
     this.options=rst.data;
 }else{
     this.$message.error("获取父级分类失败")
 }
 console.log(rst);
    },

// 点击添加按钮时触发的事件
gosave(){
    this.isShow=true;
},
     // 当每页显示的数据条数发生变化时调用的方法,该方法接收一个参数,值为当前每页显示的数据条数
    handleSizeChange(size) {
      this.queryinfo.pagesize = size;
      this.query();
    },
    // 当点击页码时触发的方法,该方法接收一个参数,参数表示当前页码
    handleCurrentChange(pagenum) {
      this.queryinfo.pagenum = pagenum;
      this.query();
    },
    // 查询所有分类信息的方法
       async query(){
          let rst= await this.$http.get("categories",this.queryinfo);
          if(rst.meta.status==200){
            //  将列表结果赋值给tableData
                this.tableData=rst.data.result;
                //将总数据条数赋值给pagetatol
                this.totalsize=rst.data.total;
          }else{
              //提示查询失败
              this.$message.error("获取商品分类列表失败")
          }
        }
},
mounted(){
    // 调用query方法
    this.query();
    // 获取一二级分类列表
    this.gettypes();
}
}
</script>

<style>

</style>